<template>
  <div class="outmain ba_f heighthv pad_20 bor_rad5">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>老带新活动</span>
      </div>
    </div>
    <div class="flex-bet flex-y-top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
        <el-form-item>
          <router-link to="/oldOrNewAdd">
            <el-button type="primary" size="medium">新增活动</el-button>
          </router-link>
        </el-form-item>
      </el-form>
    </div>
    <div class="tabledata mar_t20">
      <el-table :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" stripe style="width: 100%">
        <el-table-column prop="name" label="活动名称"></el-table-column>
        <el-table-column prop="time" label="活动时间">
          <template slot-scope="scope">
            <div>{{scope.row.startTime}}</div>
            <div>{{scope.row.endTime}}</div>
          </template>
        </el-table-column>
<!--        <el-table-column prop="display" label="活动状态">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button type="success" size="small" v-if="scope.row.state=='1'">进行中</el-button>-->
<!--            <el-button type="danger" size="small" v-if="scope.row.state=='2'">已结束</el-button>-->
<!--            <el-button type="warning" size="small" v-if="scope.row.state=='3'">已过期</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="display" label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.display" active-value="1" inactive-value="2" @change="changeSwitch(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="flex">
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleEdit2(scope.row)">邀新纪录</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      <!--            <edit ref="edit" @fetchData="fetchData"></edit>-->
    </div>
  </div>
</template>
<script>
import { activityList, modifyActivity } from '@/api/plug';

export default {
  created() {
    this.fetchData();
  },
  data() {
    return {
      formInline: {
        name: '',
        type: ''
      },
      list: [],
      listLoading: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
    };
  },
  methods: {
    async fetchData() {
      this.listLoading = true;
      const { data, count } = await activityList({ page: this.page.currentPage});
      this.list = data;
      this.page.total = count;
      this.listLoading = false;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    onSearch() {
      this.fetchData();
    },
    async changeSwitch(row) {
      const { msg } = await modifyActivity({ id: row.id, display: row.display, type: 1 });
      this.$baseMessage(msg, 'success');
      this.fetchData();
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await modifyActivity({ id: row.id, type: 2 });
          this.$baseMessage(msg, 'success');
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const id = this.selectRows.map((item) => item.id);
          this.$baseConfirm('你确定要删除选中项吗', null, async () => {
            const { msg } = await modifyActivity({ id, type: 2 });
            this.$baseMessage(msg, 'success');
            this.fetchData();
          });
        } else {
          this.$baseMessage('未选中任何行', 'error');
          return false;
        }
      }
    },
    handleEdit(row) {
      if (row) {
        this.$router.push(`/oldOrNewAdd?id=${row.id}`);
      }
    },
    handleEdit2(row) {
      if (row.id) {
        this.$router.push(`/InvitationRecord?id=${row.id}`);
      } else {
        this.$router.push({ path: '/InvitationRecord' });
      }
    }
  }
};
</script>
<!--<style lang="scss" scoped>-->
<!--.coupon-item {-->
<!--  white-space: nowrap;-->
<!--  padding: 20px 27px 17px;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  background: rgba(51, 136, 255, 0.07);-->
<!--  margin-right: 20px;-->
<!--  flex: 1;-->
<!--  text-align: center;-->
<!--  align-items: center;-->
<!--  justify-content: space-between;-->
<!--  border-radius: 5px;-->
<!--}-->
<!--</style>-->
